<script lang="ts" setup>
import { myGoodsDetail } from '@/api/goods'
import type { GoodsItemModel } from '@/api/goods'
import { setSku_list, setSpec_list } from '@/views/goods/set_Sku_data'
import type { SkuListItem, SpecListItem } from '@/views/goods/set_Sku_data'

interface GoodsItemTableModel extends GoodsItemModel {
  sku_list?: SkuListItem[]
  spec_list?: SpecListItem[]
}
interface Props {
  goodsId: string
}
const props = withDefaults(defineProps<Props>(), {
  goodsId: '', // 商品id
})

// 获取商品数据
const goodsItem = ref<GoodsItemTableModel>()
async function getDetail() {
  const { code, data } = await myGoodsDetail({ goodsId: props.goodsId })
  if (code === 0) {
    goodsItem.value = data
    goodsItem.value.sku_list = setSku_list(data, data.none_sku ? 'none' : '')
    goodsItem.value.spec_list = setSpec_list(data.skuList, data.none_sku ? 'none' : '')
    console.log(goodsItem, 'goodsItem')
  }
}
onMounted(() => {
  if (props.goodsId)
    getDetail()
})
</script>

<template>
  <AppPage v-if="goodsItem">
    <n-grid x-gap="20" :cols="2" p-10 text-14 mt-20 mb-20 class="goodsDetail-content" item-responsive responsive="screen">
      <n-grid-item span="2 m:2 l:1" mb-30 goods-detail-card>
        <n-carousel draggable centered-slides show-arrow effect="card" autoplay style="height: 400px">
          <n-carousel-item
            v-for="item in goodsItem.homeImageIds"
            :key="item.id" :style="{ width: '90%' }"
          >
            <img
              class="goodsDetail-content-carouselImg"
              :src="item.url"
            >
          </n-carousel-item>
        </n-carousel>
      </n-grid-item>
      <n-grid-item span="2 m:2 l:1" mb-30 goods-detail-card bg-white dark:bg-dark>
        <n-space text-18 font-bold mb-5 style="color: #606266;">
          {{ goodsItem.name || '未命名商品' }}
        </n-space>
        <n-space text-14 font-bold mb-20 style="color: #F56C6C;">
          【 {{ goodsItem.hot }} 】
        </n-space>
        <n-space align="center" mb-20>
          <span text-18 font-bold>秒杀价：</span>
          <n-gradient-text type="danger" text-24 font-bold>
            ￥{{ goodsItem.price }}
          </n-gradient-text>
          <span decoration-line-through style="color: #606266;">￥{{ goodsItem.oldPrice }}</span>
        </n-space>
        <n-space align="center" mb-20>
          <span text-18 font-bold>剩余总库存：</span>
          <n-gradient-text type="info" text-16>
            {{ goodsItem.stock_num }}
          </n-gradient-text>
        </n-space>
        <n-space align="center" mb-20>
          <span text-18 font-bold>商品类别:</span>
          <Ccascader v-model:categoryId="goodsItem.parentId" w-200 disabled />
        </n-space>
        <n-space>
          <span text-18 font-bold>规格列表：</span>
          <template v-if="goodsItem.sku_list && goodsItem.sku_list!.length > 0">
            <n-space vertical>
              <div v-for="item in goodsItem.sku_list" :key="item._id" flex items-center style="color: #606266;">
                <Cimage :src="item.image" width="50" height="50" />
                <icon-mdi:chevron-double-right text-20 font-bold />
                <span text-16 ml-15>{{ item.sku_name_arr.toString() }}</span>
                <span text-16 ml-15>库存: x{{ item.stock }}</span>
                <span text-16 ml-15>价格: ￥{{ item.price }}</span>
              </div>
            </n-space>
          </template>
          <div v-else>
            未有数据
          </div>
        </n-space>
      </n-grid-item>
    </n-grid>
    <n-divider title-placement="center" text-18 font-bold>
      商品详情
    </n-divider>
    <n-grid :cols="2" x-gap="20" item-responsive responsive="screen">
      <n-grid-item v-for="item in goodsItem.detailsImageIds" :key="item.id" span="2 m:2 l:1" goods-detail-card bg-white dark:bg-dark>
        <img
          :src="item.url"
          style="object-fit: cover;"
        >
      </n-grid-item>
    </n-grid>
  </AppPage>
  <AppPage v-else>
    <Cempty />
  </AppPage>
</template>

<style lang="scss" scoped>
:deep(.n-divider .n-divider__line) {
  height: 2px;
}
[goods-detail-card]{
  border-radius: 10px;
  padding: 15px;
  min-height: 430px;
}
.goodsDetail-content{
  &-carouselImg{
    object-fit: cover;
    border-radius: 6px;
    width: 500px;
    max-width: 100%;
    height: 400px;
    max-height: 100%;
  }
}

.n-carousel {
  :deep(.n-carousel__slides .n-carousel__slide) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :deep(.n-carousel__arrow) {
    background-color: rgba(0, 0, 0, .5) !important;
  }
}
</style>
